<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import { updateSystemUserAdminApi } from '#/api/system/user'
import {$t} from '#/locales'

defineOptions({ name: 'SetRoleDialog' })
const props = defineProps({
  userData: {
    type: Object,
    default: () => { }
  },
  roleList: {
    type: Array,
    required: true,
  }
});
const emit = defineEmits(['queryTable'])
const submitLoading = ref(false)
const dialogVisible = ref(false)
const formRef = ref()
const defaultFormInline = {
  isAdmin: null,
  roles: []
}
const formInline = reactive({ ...defaultFormInline })
const rules = {
  isAdmin: [
    { required: true, message: $t('common.selectPhTxt', [$t('user.roleTxt')]), trigger: 'change' },
  ]
}

const handleClose = () => {
  Object.assign(formInline, defaultFormInline)
  formRef.value.resetFields()
  dialogVisible.value = false
}

const inint = () => {
  dialogVisible.value = true
}
  
watch(dialogVisible, () => {
  if (dialogVisible.value) {
    formInline.isAdmin = props.userData.isAdmin
    formInline.roles = props.userData.roles.filter((item: any) => props.roleList.find((role: any) => role.id === item))
  }
})
const handleChange = () => {
  if (!formInline.isAdmin) {
    formInline.roles = []
  }
}
const submit = () => {
  if (!formRef) return
  formRef.value?.validate((valid: any) => {
    if (valid) {
      if (!props.userData) return
      let params = {
        isAdmin: formInline.isAdmin,
        id: props.userData.userId,
        roles: formInline.roles
      }
      submitLoading.value = true
      updateSystemUserAdminApi(params).then(() => {
        handleClose()
        emit('queryTable')
      }).finally(() => {
        submitLoading.value = false
      })
    }
  })
}

defineExpose({ inint })

</script>
<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :title="$t('user.assignRolesTxt')" width="350" :append-to-body="true"
    :close-on-click-modal="false" :before-close="handleClose">
    <el-form ref="formRef" :model="formInline" :rules="rules" label-width="70px">
      <el-form-item :label="$t('user.typeTxt')">
        <el-radio-group v-model="formInline.isAdmin" @change="handleChange">
          <el-radio :value="true">{{$t('user.backUserTxt')}}</el-radio>
          <el-radio :value="false">{{$t('user.frontUserTxt')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('user.roleTxt')">
        <el-select :disabled="!formInline.isAdmin" :multiple="true" v-model="formInline.roles" clearable :placeholder="$t('common.selectPhTxt', [$t('user.roleTxt')])">
          <el-option v-for="item in roleList as any" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('common.cancelTxt') }}
        </el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">
          {{ $t('common.submitTxt') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped></style>
